<template>
	<view class="my">
		<view class="user_base">
			<view class="left">
				<image :src="userInfo.avatar  || '../../static/icon/home.png'" ></image>
				<text>{{userInfo.nickName || '微信用户'}}</text>
			</view>
			<view class="right" @click="onUserInfo">
				<text>去完善信息</text>
				<image src="../../static/icon/right.png"></image>
			</view>
		</view>
		
		<view class="links">
			<u-cell-group>
			    <u-cell isLink :border="false" title="我的房屋">
					<image class="left-icon" slot="icon" src="../../static/icon/myhouse.png" mode=""></image>
				</u-cell>
				<u-cell isLink :border="false" title="我的保修">
					<image class="left-icon" slot="icon" src="../../static/icon/myrepair.png" mode=""></image>
				</u-cell>
				<u-cell isLink :border="false" title="访客记录">
					<image class="left-icon" slot="icon" src="../../static/icon/myfriends.png" mode=""></image>
				</u-cell>
			 </u-cell-group>   	
		</view>
		<u-button  @click="logout" type="primary" text="退出账号">退出账号</u-button>
		<u-modal showCancelButton :show="show" title="享+生活" content='是否确认退出账号' @cancel="onCancel" @confirm="onConfirm"></u-modal>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				show:false
			}
		},
		computed:{
			userInfo(){
				return this.$store.state.user.userInfo
			}
		},
		methods:{
			logout(){
				this.show = true
			},
			onCancel(){
				this.show = false
			},
			// 按确认按钮
			onConfirm(){
				// 清除token
				this.$store.commit('user/setUserToken',null)
				// 删除本地的
				uni.removeStorageSync('userToken')
				this.show = false
				// 跳转到登入页销毁我的这个页面
				uni.redirectTo({
					url:"/pages/login/login"
				})
			},
			// 跳转到个人信息
			onUserInfo(){
				uni.navigateTo({
					url:"/pages/userInfo/userInfo"
				})
			}
		},
		onLoad(){
			this.$store.dispatch('user/loadUserInfo')
			// console.log(123)
		}
	}
</script>

<style lang="scss" scoped>
	.my{
		height: 100%;
		background-color: #FAFAFA;
		
		.user_base{
			width: 750rpx;
			height: 482rpx;
			padding: 128rpx 40rpx 0 40rpx;
			border-radius: 0rpx 0rpx 60rpx 60rpx;
			background: #6394C0;
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;
			.left{
				height: 80rpx;
				display: flex;
				align-items: center;
				
				image{
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}
				text {
					color: #fff;
					font-size: 40rpx;
					margin-left:20rpx;
				}
			}
			.right {
			    height: 80rpx;
			    display: flex;
			    align-items: center;
			
			    text {
			      color: #fff;
			      font-size: 28rpx;
			      margin-right: 10rpx;
			    }
			
			    image {
			      width: 32rpx;
			      height: 32rpx;
			    }
			  }
		}
		.links {
		  width: 670rpx;
		  height: 306rpx;
		  background-color: #fff;
		  border-radius: 16rpx;
		  margin: 0 auto;
		  margin-top: -136rpx;
		
		  ::v-deep .u-cell__body {
		    padding: 0 25rpx;
		    height: 102rpx;
		
		    .u-cell__title-text {
		      color: #3C3E42 !important;
		      font-size: 28rpx !important;
		    }
		  }
		
		  .left-icon {
		    width: 40rpx;
		    height: 40rpx;
		    margin-right: 25rpx;
		  }
		}
		::v-deep .u-button {
			width: 670rpx;
			margin: 25rpx auto;
			background-color: #6394C0;
			border: none;
		}
	}
</style>